<template>
  <div class="house-info">
    <div class="house-info-item" v-for="(item, index) of dataList" :key="index">
      <split-title :text="`房产信息${index + 1}`" />
      <descriptions :columns="columns" :data-source="item" :col-span="12" />
      <a-space v-if="!isTemporary" class="button-group">
        <a-button @click="showMember(item)">房屋人员</a-button>
        <a-button @click="modify(item)">修改与户主关系</a-button>
      </a-space>
    </div>
    <empty v-if="!dataList || !dataList.length" />
  </div>
</template>

<script>
import Empty from '@gis/lib/components/Empty/index.vue';
import { dialog } from '@gis/lib/components/antd-dialog';
import { peopleHouseList } from '@gis/lib/api/index.js';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';

export default {
  name: 'house-info',
  components: { SplitTitle, Empty },
  props: {
    data: { type: Object, default: () => ({}) },
    isTemporary: { type: Boolean, default: false }, // 是否临时人员或者省厅扫码人员
  },
  data() {
    return {
      dataList: [],
      columns: [
        { label: '所属小区', key: 'room_full_name' },
        { label: '入住时间', key: 'gmt_create' },
        { label: '与户主关系', key: 'dic_relation' },
        { label: '到期时间', key: 'rent_deadline', visible: (v, item) => (item.relation === 'D0006_4' ? true : false) },
        { label: '授权', key: 'is_app', format: (v) => (v ? '已授权APP' : '未授权APP') },
        { label: '居住状态', key: 'is_live', format: (v) => (v == 1 ? '常住' : '不常住') },
      ],
    };
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(data) {
        if (data && data.people_id) {
          this.getDataAsync();
        }
      },
    },
  },
  methods: {
    async getDataAsync() {
      const params = { people_id: this.data.people_id };
      this.dataList = await handleCommonRes(peopleHouseList(params));
    },
    showMember(data) {
      dialog({
        content: () => import('./components/house-members.vue'),
        contentProps: { data: data },
        dialogProps: {
          title: '房屋人员信息',
          width: 'medium',
          height: 'fixed',
          footer: null,
        },
      });
    },
    modify(data) {
      dialog({
        content: () => import('./components/modify-relation-ship.vue'),
        contentProps: {
          data: data,
        },
        dialogProps: {
          title: '修改与户主关系',
          onOk: () => {
            this.getDataAsync();
          },
        },
      });
    },
  },
};
</script>

<style lang="less">
.house-info {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  //line-height: 30px;
  //.house-info-item {
  //  & + .house-info-item {
  //    margin-top: 54px;
  //  }
  //  .button-group {
  //    margin-top: 18px;
  //  }
  //}
}
</style>
